<template>
	<view class="content">
		<view class="label_title">
			<text>账号</text>
			<input type="text" :value="phone" disabled="disabled"/>
		</view>
		<view class="label_title">
			<text>旧密码</text>
			<input type="text" v-if="check_box" v-model="old_pwd" placeholder="请填写旧密码"/>
			<input type="password" v-else v-model="old_pwd" placeholder="请填写旧密码"/>
		</view>
		<view class="label_title">
			<text>新密码</text>
			<input type="text" v-if="check_box" v-model="pwd" placeholder="请填写新密码"/>
			<input type="password" v-else v-model="pwd" placeholder="请填写新密码"/>
		</view>
		<text class="tips">最少8位，至少包括一个大写字母、一个小写字母、一个数字</text>
		<view class="label_title">
			<text>确认新密码</text>
			<input type="text" v-if="check_box"  v-model="pwd2" placeholder="请再次填写新密码"/>
			<input type="password" v-else v-model="pwd2" placeholder="请再次填写新密码"/>
		</view>
		<view class="label_title">
			<text>验证码</text>
			<input type="text" v-model="code" placeholder="请填写验证码"/>
			<view type="default" class="button" :class="isGet ?'isTrue':''" @click="getCode">{{codeText}}</view>
		</view>
		<view class="check-group">
			<checkbox @click="show_check_box"/>
			<text>显示密码</text>
			<text class="forgetPwd" @click="forgetPwd">忘记密码?</text>
		</view>
		<button class="btn_confirm"   @click="updatePwd">确定</button>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				phone: '',
				check_box: false,
				type: 'password',
				old_pwd: '',
				pwd: '',
				pwd2: '',
				isGet: false, //判断是否获取验证码
				code: "",
				codeText: '获取验证码',
				count:0,
				timer:null
			}
		},
		onLoad() {
			var phone = uni.getStorageSync('phone');
			this.phone = phone;
		},
		methods:{
			/* 判断是否显示密码 */
			show_check_box: function() {
				this.check_box = !this.check_box;
			},
			/* 判断是否发送验证码 */
			getCode() {
				if(this.phone != "") {
					var yanData = {
						phone: this.phone,
						code_type: 'changeps_code'
					}
					this.$zapi.apiPost('user/currency.Code/SendCode',yanData).then(res => {
						if (res.data.code == 200) {
							this.getInterval(); //定时器
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					})
				} else {
					uni.showToast({
						title: '手机号不正确',
						icon:"none"
					})
				}
			},
			updatePwd() {
				var data = {
					'old_pwd': this.old_pwd,
					'pwd': this.pwd,
					'updatepas_code': this.code
				}
				var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/; //密码验证规则
				if(!reg.test(this.pwd)) {
					uni.showToast({
						title: "新密码格式不正确",
						icon: "none"
					})
				} else {
					if(this.pwd != this.pwd2) {
						uni.showToast({
							title:"您两次输入的密码不一致",
							icon:"none"
						})
					} else {
						this.$zapi.apiPost('user/currency.basic/UpdatePas',data).then(res => {
							if(res.data.code == 200) {
								uni.showToast({
									title:"密码修改成功",
									icon:"none"
								})
								this.$zapi.apiPost('user/currency.basic/UserLoginOut').then(res => {return})
								uni.setStorageSync('token', '');
								setTimeout(function() {
									uni.reLaunch({
										url: 'login'
									})
								}, 3000);
							} else {
								uni.showToast({
									title:res.data.msg,
									icon:"none"
								})
							}
						})
					}
				}
			},
			forgetPwd() {
				uni.redirectTo({
					url: '../../user/forget-pwd'
				})
			},
			getInterval() {
				var that=this;
				uni.showToast({
					title: '短信发送成功',
					duration: 1000,
					success: function(res) {
						const TIME_COUNT = 60;
						that.count = TIME_COUNT;
						that.timer = setInterval(() => {
							if (that.count > 0 && that.count <= TIME_COUNT) {
								// 倒计时时不可点击
								that.isGet = true;
								// 计时秒数
								that.count--;
								// 更新按钮的文字内容
								that.codeText = that.count + 's后重新获取';
							} else {
								// 倒计时完，可点击
								that.isGet = false;
								// 更新按钮文字内容
								that.codeText = '获取验证码';
								// 清空定时器!!!
								clearInterval(that.timer);
								that.timer = null;
							}
						}, 1000);
					}
				});
			}
		}
	}
</script>

<style>
page{
	background: #FAFAFA;
}
.label_title{
	background: #FFFFFF;
	border-top: 2upx solid #E5E5E5;
	padding: 0 4%;
	width: 92%;
	margin: auto;
	height: 112upx;
	line-height: 80upx;
	font-size: 34upx;
	color: #999999;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.label_title text{
	width: 30%;
	color: #333333;
}
.label_title:first-child{
	border: none;
}
.label_title:first-child text{
	color: #999999;
}
.label_title input{
	width: 70%;
	height: 80upx;
	line-height: 80upx;
}
.tips{
	color: #999999;
	float: left;
	margin-right: 30upx;
	margin-left: 30%;
}
.tips + .label_title{
	border: none;
}
.button{
	white-space: nowrap;
	padding: 10upx 18upx;
	border: 2upx solid #E5E5E5;
	border-radius: 34upx;
}
.isTrue{
	color: #FFFFFF;
	background-color: #FF9900;
	border: 2upx solid #FF9900;
}
.check-group{
	margin-top: 20upx;
	margin-left: 20upx;
}
checkbox{
	transform: scale(0.7);
}
checkbox .wx-checkbox-input {
	margin-right: 10upx;
	-webkit-appearance: none;
	appearance: none;
	outline: 0;
	border: 2upx solid #999999;
	background-color: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	position: relative;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	background-color: #FF9900;
	color: #FFFFFF !important;
	border: 2upx solid #FF9900;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked:before{
	font-size: 40upx !important;
}
.check-group text{
	color: #999999;
	font-size: 32upx;
}
.forgetPwd{
	float: right;
	margin-right: 30upx;
	color: #FF9900 !important;
	font-weight: bold;
}
.btn_confirm{
	margin: 40upx 30upx;
	background: #FF9900;
	color: #FFFFFF;
	text-align: center;
	height: 80upx;
	line-height: 80upx;
}
.btn_confirm:after{
	border: none;
}
</style>
